import 'dart:math';

import 'package:flutter/material.dart';

class Detailpage extends StatelessWidget {
  const Detailpage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        title: Text("ABC"),
        actions: [IconButton(onPressed: () {}, icon: Icon(Icons.more_horiz))],
      ),
      body: ChatDetailList(),
    );
  }
}

class chatRecord {
  late int sender;
  late String content;
  late String avatarUrl;

  chatRecord(
      {required this.sender, required this.content, required this.avatarUrl});
}

class ChatDetailList extends StatelessWidget {
  const ChatDetailList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    String ava1 =
        "https://pic1.zhimg.com/v2-0aa271fdadb3130a549af500c4d4569a_is.jpg";
    String ava2 =
        "https://pic2.zhimg.com/v2-d2f3715564b0b40a8dafbfdec3803f97_is.jpg";
    List<chatRecord> records = <chatRecord>[];
    records.add(chatRecord(sender: 0, content: "你吃了么", avatarUrl: ava1));
    records.add(chatRecord(sender: 1, content: "每次", avatarUrl: ava2));
    records.add(chatRecord(sender: 0, content: "吃啥", avatarUrl: ava1));
    records.add(chatRecord(sender: 1, content: "不吃\n今天不饿", avatarUrl: ava2));
    return ListView.builder(
        itemCount: records.length,
        itemBuilder: (BuildContext context, int index) {
          return ChatRow(
            avatarUrl: records[index].avatarUrl,
            content: records[index].content,
            sender: records[index].sender,
          );
        });
  }
}

class ChatRow extends StatelessWidget {
  const ChatRow({
    Key? key,
    required this.sender,
    required this.content,
    required this.avatarUrl,
  }) : super(key: key);

  final int sender; //0 self 1 other
  final String content;
  final String avatarUrl;

  @override
  Widget build(BuildContext context) {
    double rpx = MediaQuery.of(context).size.width / 750;
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20 * rpx, vertical: 10 * rpx),
      child: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment:
              sender == 0 ? MainAxisAlignment.start : MainAxisAlignment.end,
          children: [
            sender == 0
                ? CircleAvatar(
                    backgroundImage: NetworkImage(avatarUrl),
                  )
                : Container(),
            sender == 0
                ? Container(
                    // padding: EdgeInsets.only(top: 10 * rpx, left: 20 * rpx),
                    child: CustomPaint(
                      painter: ChatBoxPainter(
                          color: Colors.greenAccent,
                          width: 20 * rpx,
                          height: 15 * rpx),
                    ),
                  )
                : Container(),
            Container(
              child: Text(
                content,
                style: TextStyle(
                    fontSize: 27 * rpx, letterSpacing: 1.5 * rpx, height: 1.7),
              ),
              margin: EdgeInsets.only(left: 20 * rpx, right: 20 * rpx),
              padding: EdgeInsets.all(15 * rpx),
              decoration: BoxDecoration(
                  color: sender == 0 ? Colors.greenAccent : Colors.white,
                  borderRadius: BorderRadius.circular(10 * rpx)),
            ),
            sender == 1
                ? Transform.rotate(
                    angle: pi,
                    child: Container(
                      // padding: EdgeInsets.only(top: 20 * rpx),
                      child: CustomPaint(
                        painter: ChatBoxPainter(
                            color: Colors.white,
                            width: 20 * rpx,
                            height: 15 * rpx),
                      ),
                    ),
                  )
                : Container(),
            sender == 1
                ? CircleAvatar(
                    backgroundImage: NetworkImage(avatarUrl),
                  )
                : Container(),
          ]),
    );
  }
}

class ChatBoxPainter extends CustomPainter {
  ChatBoxPainter(
      {required this.width, required this.height, required this.color});

  final double width;
  final double height;
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    Path path = Path()
      ..moveTo(0, height / 2)
      ..lineTo(width, height)
      ..lineTo(width, 0)
      ..lineTo(0, height / 2);

    Paint paint = Paint()
      ..style = PaintingStyle.fill
      ..color = color;
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(ChatBoxPainter oldDelegate) => false;

  @override
  bool shouldRebuildSemantics(ChatBoxPainter oldDelegate) => false;
}
